<template>
	<view>
		<view class="member_box box mb1">
			<view class="avatar"><image :src="avatar" /></view>
			<view class="info box_flex_1" @click="toLogin">
				<view class="nickname">
				{{ member.nickname }}
				<image class="group_icon" v-if="member.group.icon !=''" :src="member.group.icon" mode="widthFix" />
				</view>
				<view class="signature">当前积分：{{ member.points }}</view>
			</view>
		</view>

		<view class="order_box mb1">
			
			
			<view class="my-cell" @click="toOrder(0)">
				<view class="title">商城订单</view>
				<view class="info">查看全部订单</view>
				<view class="icon"><text class="iconfont icon-ziyuan3"></text></view>
			</view>
			
			 

			<view class="order_status">
				<view class="order_status_icon" @click="toOrder(1)">
					<view class="iconfont icon-daifukuan"><text class="badge" v-if="statics.daifukuan > 0">{{statics.daifukuan}}</text></view>
					<view>待付款</view>
				</view>

				<view class="order_status_icon" @click="toOrder(2)">
					<view class="iconfont icon-daifahuo"><text class="badge"  v-if="statics.daifahuo > 0">{{statics.daifahuo}}</text></view>
					<view>待发货</view>
				</view>

				<view class="order_status_icon" @click="toOrder(3)">
					<view class="iconfont icon-yifahuo"><text class="badge"  v-if="statics.daishouhuo > 0">{{statics.daishouhuo}}</text></view>
					<view>待收货</view>
				</view>
				<view class="order_status_icon" @click="toOrder(4)">
					<view class="iconfont icon-daipingjia"><text class="badge"  v-if="statics.daipingjia > 0">{{statics.daipingjia}}</text></view>
					<view>待评价</view>
				</view>

				<view class="order_status_icon br0" @click="goService">
					<view class="iconfont icon-shouhou"><text class="badge"  v-if="statics.daichuli > 0">{{statics.daichuli}}</text></view>
					<view>售后</view>
				</view>
			</view>
		</view>

		<view class="more_box">
			<uni-list>
				<uni-list-item title="我的地址" @click="toAddress" :show-extra-icon="true" :extra-icon="{ color: '#919191', size: '20', type: 'location' }"></uni-list-item>
				<uni-list-item title="我的积分" @click="toPoints" :show-extra-icon="true" :extra-icon="{ color: '#919191', size: '20', type: 'star' }"></uni-list-item>
				<uni-list-item title="服务中心" @click="toService" :show-extra-icon="true" :extra-icon="{ color: '#919191', size: '20', type: 'headphones' }"></uni-list-item>
			</uni-list>
		</view>
		<view class="bottom_positon" @click="gotest">木马牛提供技术支持v1.6</view>

		<my-navbar></my-navbar>
	</view>
</template>

<script>
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
import myNavbar from '@/components/my-navbar/my-navbar.vue';

import avatar from '@/static/avatar_default.png';

export default {
	components: { myNavbar, uniListItem, uniList },
	data() {
		return {
			statics: {},
			member: {
			  nickname: '未登录',
			  avatar: avatar,
			  points: '0',
			  group: {
			    icon: ''
			  }
			}
		};
	},
	onShow() {
		let uid = uni.getStorageSync('token');
		if (uid) {
			this.loadData();
		}
	},
	computed: {
		avatar() {
			if (this.member.avatar) {
				return this.member.avatar;
			} else {
				return avatar;
			}
		}
	},
	methods: {
		
		
		goService(){
			uni.navigateTo({
				url:'../order/service?state=1'
			})
		},
		
		toAddress(){
			uni.navigateTo({
				url: './address'
			})
		},
		toPoints(){
			uni.navigateTo({
				url: './points'
			})
		},
		toService(){
			uni.navigateTo({
				url: './service'
			})
		},
		
		toOrder(state){
			uni.navigateTo({
				url:'../order/order?state=' + state
			})
		},
		toLogin() {
			let uid = uni.getStorageSync('token');
			if (!uid) {
				uni.navigateTo({
					url: '../everyone/login'
				});
				//this.$router.push({ path: '/login', query: { redirect: '/mine' } });
			}
		},
		loadData() {
			this.$http.post('/shop.member/index', {}).then(res => {
				this.member = res.data.data.member;
				this.statics = res.data.data.statics;
			});
		},
		gotest() {
			uni.navigateTo({
				url: '../everyone/test'
			});
		}
	}
};
</script>

<style lang="scss">


.bottom_positon {
	position: absolute;
	bottom: 70px;
	width: 100%;
	color: #bbb;
	text-align: center;
	font-size: 12px;
}

.order_status {
	display: flex;
	.order_status_icon {
		margin-top: 15px;
		margin-bottom: 15px;
		flex: 1;
		position: relative;
		&::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 200%;
			height: 200%;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			border-right: 2px solid #e4e3e6;
			height: 150%;
			transform: scale(0.5) translate3d(-50%, -50%, 0);
			transform-origin: 0 0;
		}
		&:last-child::after {
			border: 0;
		}

		.iconfont {
			position: relative;
			font-size: 20px;
			display: inline-block;
			.badge {
				position: absolute;
				top: -10rpx;
				right: -20rpx;
				width: 30rpx;
				height: 30rpx;
				border-radius: 15rpx;
				background-color: red;
				line-height: 30rpx;
				text-align: center;
				color: white;
			}
		}
		text {
			font-size: 12px;
		}
	}

	// .order_status_icon {
	//   .iconfont {
	//     position: relative;
	//   }
	// }
}

/* 订单状态 */
.order_all {
	text-decoration: none;
	color: #aaa;
}

.order_status .order_status_icon {
	text-align: center;
}

 


.order_box {
	background-color: white;
	margin-bottom: 30rpx;
}



.member_box {
	padding: 30px 20px;
	background: linear-gradient(135deg, $colorPrimary, $colorPrimaryDark);
	
	.avatar {
		margin-right: 10px;
		width: 60px;
		height: 60px;
		image {
			width: 60px;
			height: 60px;
			border: 0;
			border-radius: 50%;
		}
	}
	
	.info {
		color: white;
		height: 60px;
		display: table-cell;
		vertical-align: middle;
		.nickname {
			font-weight: bold;
			font-size: 18px;
			.group_icon{
			  width: 20px;
			  margin-left: 5px;
			 }
		}
		.signature {
			font-size: 14px;
		}
	}
}

</style>
